<template>
	<view class="upload-content flex ccc">
		<view class="upload-content-item flex ccc" @tap="uploadImage(1)">
			<view class="upload-img-wrap flex ccc pos-r">
				<image class="upload-btn-icon" :src="cardfront" mode="widthFix" />
				<image class="upload-camera pos-a" src="../../static/icon/icon_camera.png" mode="widthFix" />
			</view>
			<text class="upload-btn-title">上传身份证正面</text>
		</view>
		<view class="upload-content-item flex ccc" @tap="uploadImage(2)">
			<view class="upload-img-wrap flex ccc pos-r">
				<image class="upload-btn-icon" :src="cardreverse" mode="widthFix" />
				<image class="upload-camera pos-a" src="../../static/icon/icon_camera.png" mode="widthFix" />
			</view>
			<text class="upload-btn-title">上传身份证反面</text>
		</view>
		<view class="btn-item submit-btn-item flex rcc" @tap="onPressSubmit">
			<text class="btn-item-title">确认上传</text>
		</view>
	</view>
</template>
<script>
	import aliOss from '../../components/ali-oos/ali-oos/index.js'
	export default {
		data() {
			return {
				Images: this.Images,
				idcard_one: '',
				cardfront: '../../static/icon/icon_card_front.png',
				idcard_two: '',
				cardreverse: '../../static/icon/icon_card_reverse.png',
				cardFrontInfo: {},
				cardReverseInfo: {},
			}
		},
		methods: {
			async uploadImage(type) {
				let options = {
					count: 1,
					sourceType: 'album'
				}
				let res = await aliOss.chooseImage(options);
				if (res.code === 1) {
					let up_res = await aliOss.uploadImage(res.data);
					if (up_res.code === 1) {
						let {
							data
						} = up_res;
						if (type == 1) {
							this.cardFrontInfo = data[0];
							this.cardfront = data[0].path_server;
							this.idcard_one = data[0].name_server;
						} else if (type == 2) {
							this.cardReverseInfo = data[0];
							this.cardreverse = data[0].path_server;
							this.idcard_two = data[0].name_server
						}
					}
				}
			},
			async onPressSubmitTest() {
				let res = {
					"msg": "获取成功",
					"data": {
						"住址": {
							"location": {
								"width": 169,
								"top": 353,
								"left": 103,
								"height": 39
							},
							"words": "山东省诸城市龙都街道邱家七吉村540号"
						},
						"出生": {
							"location": {
								"width": 119,
								"top": 321,
								"left": 104,
								"height": 15
							},
							"words": "19931215"
						},
						"姓名": {
							"location": {
								"width": 44,
								"top": 253,
								"left": 106,
								"height": 17
							},
							"words": "丌炜"
						},
						"公民身份号码": {
							"location": {
								"width": 222,
								"top": 435,
								"left": 167,
								"height": 19
							},
							"words": "370782199312150815"
						},
						"性别": {
							"location": {
								"width": 13,
								"top": 289,
								"left": 105,
								"height": 15
							},
							"words": "男"
						},
						"民族": {
							"location": {
								"width": 13,
								"top": 291,
								"left": 187,
								"height": 14
							},
							"words": "汉"
						}
					},
					"code": 1
				};
				let up_res1 = {
					name_server: "1571051343014.png",
					path: "http://tmp/touristappid.o6zAJs9KGG9ER0ZQI1d0WOrgziiM.69stymShp2e036050103abd4f0ebdfe2ffb85212157f.png",
					path_server: "http://talent-pool.oss-cn-qingdao.aliyuncs.com/talent-pool/1571051343014.png",
					size: 2618997,
					upload_percent: 0
				};
				let up_res2 = {
					name_server: "1571051343014.png",
					path: "http://tmp/touristappid.o6zAJs9KGG9ER0ZQI1d0WOrgziiM.69stymShp2e036050103abd4f0ebdfe2ffb85212157f.png",
					path_server: "http://talent-pool.oss-cn-qingdao.aliyuncs.com/talent-pool/1571051343014.png",
					size: 2618997,
					upload_percent: 0
				};
				uni.showToast({
					icon: 'none',
				    title: '识别成功',
				});

				let userInfoData = encodeURIComponent(JSON.stringify(res.data));
				let cardFrontInfo = encodeURIComponent(JSON.stringify(up_res1));
				let cardReverseInfo = encodeURIComponent(JSON.stringify(up_res2));
				uni.navigateTo({
					url: '/pages/publish/talent_add_manual?userInfoData=' + userInfoData + '&cardFrontInfo=' + cardFrontInfo +
						'&cardReverseInfo=' + cardReverseInfo + '&page_flag=upload',
				});
			},
			async onPressSubmit() {
				// this.onPressSubmitTest();
				// return;
				let url = this.ServicesApi.getIdCardDetail;
				let data = {
					license: this.cardfront
				};
				if (!this.idcard_one) {
					uni.showToast({
						icon: 'none',
						title: '请上传身份证正面照片',
					});
					return;
				}
				if (!this.idcard_two) {
					uni.showToast({
						icon: 'none',
						title: '请上传身份证反面照片',
					});
					return;
				}
				uni.showLoading({
					title: '识别中...'
				});
				let result = await this.Services.post(url, data);
				uni.hideLoading();
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					uni.showToast({
						icon: 'none',
						title: '识别成功',
					});
					let userInfoData = encodeURIComponent(JSON.stringify(result.data));
					let cardFrontInfo = encodeURIComponent(JSON.stringify(this.cardFrontInfo));
					let cardReverseInfo = encodeURIComponent(JSON.stringify(this.cardReverseInfo));
					uni.navigateTo({
						url: '/pages/publish/talent_add_manual?userInfoData=' + userInfoData + '&cardFrontInfo=' + cardFrontInfo +
							'&cardReverseInfo=' + cardReverseInfo + '&page_flag=upload',
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '身份证识别失败，请重试',
					});
				}
			}
		}
	}
</script>

<style scoped>
	.upload-content {
		flex: 1;
		padding: 30upx;
		min-height: 100vh;
		background: #FFFFFF;
	}

	.upload-content-item {
		margin-top: 60upx;
	}

	.upload-btn-icon {
		width: 520upx;
		height: 520upx;
	}

	.upload-camera {
		width: 120upx;
		height: 120upx;
	}

	.upload-btn-title {
		color: #666666;
		font-size: 28upx;
		margin-top: 16upx;
	}

	.submit-btn-item {
		width: 600upx;
		height: 80upx;
		color: #FFFFFF;
		font-size: 30upx;
		margin-top: 100upx;
		border-radius: 4upx;
		background: linear-gradient(270deg, rgba(0, 106, 231, 1) 0%, rgba(66, 157, 255, 1) 100%);
	}
</style>
